{% extends 'base.html' %}

{% block content %}
    <div class="container">


        <div style="margin-bottom: 10px;">
            <input type="button" value="新建订单1" class="btn btn-success" data-toggle="modal" data-target="#myModal">
            <input type="button" value="新建订单2" class="btn btn-success" id="btnAdd">
            <div style="float:right;width:300px;">
                <form method="get">
                    <div class="input-group">

                        <input type="text" name="q" class="form-control" placeholder="搜索用户名" value="{{ seach_data }}">
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="submit">
                                <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                            </button>
                          </span>
                    </div>
                </form>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading"><span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>&nbsp;订单列表
            </div>
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>订单号</th>
                    <th>名称</th>
                    <th>价格</th>
                    <th>支付状态</th>
                    <th>审核员</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {% for obj in data_list %}
                    <tr>
                        <th scope="row">{{ obj.id }}</th>
                        <td>{{ obj.oid }}</td>
                        <td>{{ obj.title }}</td>
                        <td>{{ obj.price }}</td>
                        <td>{{ obj.get_status_display }}</td>
                        <td>{{ obj.adminUser.user_n }}</td>
                        <td>
                            <input   uid="{{ obj.id }}" type="button" class="btn-primary btn-xs btn-edit" value="编辑">
                            <input  uid="{{ obj.id }}" type="button" class="btn-danger btn-xs btn-delete"  value="删除">
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
        <ul class="pagination" style="margin: 10px 160px">
            {{ page_string }}
        </ul>
    </div>

    {# 新建订单 对话框  #}
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">新建</h4>
                </div>
                <div class="modal-body">
                    <form id="addform">
                        <div class="clearfix">
                            {#                     {% csrf_token %}#}
                            {% for em in form %}
                                <div class="col-xs-6">
                                    <div class="form-group" style="position: relative;margin-bottom:15px;">
                                        <label>{{ em.label }}</label>
                                        {{ em }}
                                        <span style="color:red;position: absolute;" class="err-img"></span>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关 闭</button>
                    <button type="button" class="btn btn-primary" id="btn1">提 交</button>
                </div>
            </div><!-- /.modal-content -->
        </div>
    </div>

    {#  删除  对话框  #}
    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="alert alert-danger alert-dismissible fade in" role="alert"  style="margin-bottom: 0px;">
                    <h4>是否确定删除!</h4>
                    <p style="padding: 10px 2px;">如果删除的话，相关关联的数据也会被删除掉.</p>
                    <p style="text-align: right;">
                        <button id="bindConfirmDelete" type="button" class="btn btn-danger">确 定</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
                    </p>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script>
      var DELETE_ID;
      var DEIT_ID;
        $(function () {
            btnAdd();
            bindBtn();
            bindBtnDeleteEvent();
            bindConfirmDeleteEvent();
            bindBtnEditEvent();
        })

        function btnAdd() {
            $('#btnAdd').click(function () {
                //将正在编辑的id设置为空
                EDIT_ID=undefined;

                //清空对话框里的内容
                $('#addform')[0].reset();
                //修改标题
                $('.modal-title').text('新建');

                //显示新建订单框
                $('#myModal').modal('show');
            })
        };
        //新建订单/编辑订单数据
        function bindBtn() {
            $('#btn1').click(function () {

                //清除错误信息
                $('.err-img').empty();

                //判断EDIT_ID等于当前行id   是为false还是true
                if(EDIT_ID){
                    //编辑
                    doEdit();
                }else{
                   //添加
                    doAdd();
                }
            })
        };

        function doEdit() {
             //向后台发送请求(编辑的ajax请求)
                $.ajax({
                    url: '/order/edit/'+'?uid='+EDIT_ID,   // -> /order/edit/?uid=123
                    type: 'post',
                    data: $('#addform').serialize(),
                    dataType: 'JSON',
                    success: function (res) {
                        if (res.stuat) {
                            //清空表单  $('#addform')是jquery对象  $('#addform')[0]是DOM对象
                            $('#addform')[0].reset();

                            //关闭对话框
                            $('#myModal').modal('hide');

                            //刷新页面
                            location.reload();
                        } else {
                           if(res.tpis){
                               alert(res.tpis)
                           }else{
                              $.each(res.error, function (name, data) {
                                   $('#id_' + name).next().text(data[0])
                              })
                           }
                        }
                    }
                })

        };
        function doAdd() {
             //向后台发送请求（添加的ajax请求）
             $.ajax({
                    url: '/order/add/',
                    type: 'post',
                    data: $('#addform').serialize(),
                    dataType: 'JSON',
                    success: function (res) {
                        if (res.stuat) {
                            alert('创建成功');
                            //清空表单  $('#addform')是jquery对象  $('#addform')[0]是DOM对象
                            $('#addform')[0].reset();

                            //关闭对话框
                            $('#myModal').modal('hide');

                            //刷新页面
                            location.reload();
                        } else {
                            $.each(res.error, function (name, data) {
                                $('#id_' + name).next().text(data[0])
                            })
                        }
                    }
                })
        }

        function bindBtnDeleteEvent() {
            $('.btn-delete').click(function () {
                //alert('点击删除了');
                //显示删除框
                $('#deleteModal').modal('show');

                //获取对应行id并赋值给全部变量
              DELETE_ID=$(this).attr('uid');
            })
        };

        function bindConfirmDeleteEvent() {
            $('#bindConfirmDelete').click(function () {
                  //点击确定按钮，将id发送给后台
                 $.ajax({
                     url:'/order/delete/',
                     type: 'GET',
                     data:{
                        uid:DELETE_ID,
                     },
                     dataType: 'JSON',
                     success:function (res) {
                         if (res.stuat){
                             //删除成功并刷新页面
                              location.reload();
                         }else{
                             //删除失败
                             alert(res.error);
                         }

                     }
                 })
            })
        };

        function bindBtnEditEvent() {

            $('.btn-edit').click(function () {
                //清空表单  $('#addform')是jquery对象  $('#addform')[0]是DOM对象
                $('#addform')[0].reset();
                //获取到对应行的id
                 var uid =$(this).attr('uid');
                 EDIT_ID=uid;
                //发送ajax请求到后端
                $.ajax({
                    url:'/order/deatil/',
                    type:'GET',
                    //将对应行的id传给后端
                    data:{
                        uid:uid,
                    },
                    dataType:'JSON',
                    success:function (res) {
                         if(res.stuat){
                             //打印数据出来
                            console.log(res.data);

                            //遍历数据,并通过标签id 显示到对话框
                            $.each(res.data,function(name,value) {
                                $("#id_"+name).val(value);
                            })
                            //修改编辑标题
                            $('.modal-title').text('编辑');
                            //显示对话框
                             $('#myModal').modal('show');

                         }else{
                             alert(res.error);
                         }
                    }
                })
            })
        }
    </script>
{% endblock %}